<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>小米商品搜索</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="search.css"/>
    <script src="bootstrap-3.3.5-dist/jquery-2.0.3.js"></script>
</head>
<body>
<section id="wrapper">
    <header>
        <a href="xiaomishouye.html"><div class="left"></div></a>
        <input type="text"/>
        <a href="#"><div class="right"></div></a>
    </header>
    <section class="list">
        <div>
            <ul>
                <li class="red"><a href="#">小米<b>Max</b></a></li>
                <li class="red"><a href="#">小米<b>5</b>尊享版<b>3D</b>玻璃</a></li>
                <li class="red"><a href="#">红米</a></li>
                <li><a href="#">小米手机<b>5</b></a></li>
                <li><a href="#">红米<b>3</b> 高配版</a></li>
                <li><a href="#">小米手机<b>4S</b></a></li>
                <li><a href="#">小米路由器<b>3</b></a></li>
                <li><a href="#">小米<b>Note</b></a></li>
                <li><a href="#">小米<b>4C</b></a></li>
            </ul>
        </div>
    </section>
</section>
</body>
<script>
    $(function(){
        function fullwidth(){
            if($('body').width() >= 720){
                $('html').css('font-size',100 + 'px');
                return;
            }
            var scale = $('body').width() / 720;
            $('html').css('font-size',scale * 100 + 'px');
        }
        fullwidth();
        $(window).resize(function(){
            fullwidth()
        });
    });
</script>
</html>